<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>特效</title>
	</head>
	<style>
		.moveBox{
			margin: 10px;
			width: 100px;
			height: 10px;
			background: #ff0000;
			animation: mymove 1s infinite;/*每隔几秒播放动画*/
		}
		.ball{
			margin: 20px;
			width: 100px;
			height: 100px;
			background-color: #008CF4;
			border-radius: 500px;
			animation: ball 2s infinite ;
		}
		@keyframes ball{
			25%,75%,to{margin-top: 200px;
			}
			50%,100%{margin-top: 20px;}
		}
		@keyframes mymove{/*动画设定*/
			from{width: 0px;}
			to{width: 200px;}
		}
		.transitionBox{
			margin: 10px;
			width: 100px;
			height: 50px;
			background: #ee1166;
			transition: width 2s; /*宽度拉伸时间*/
		}
		.transitionBox:hover{/*鼠标移上去的宽度和高度*/
			width: 300px;
			height: 50px;
		}
		ul{
			margin: 10px 0 0 5px;
			list-style: none;/*去掉点*/
		}
		li{
			float: left;
			width: 100px;
			height: 40px;
			background-color: #ee1166;
			text-align: center;
			line-height: 40px;
			margin-right: 8px;
			-webkit-transform: skewX(30deg);/*倾斜,-webkit为谷歌浏览器技术*/
		}
		a{
			text-decoration: none;/*去超链接下划线*/
			-webkit-transform: skewX(-30deg);
			display: block;/*改成块结构*/
			color: #fff;
		}
		li:hover{
			background-color: #008cf4;/*鼠标移上的颜色*/
		}
	</style>
	<body>
		<div>移动效果:</div>
		<div class="moveBox"></div>
		
		<div>球</div>
		<div class="ball"></div>
		
		<div>拉伸效果:</div>
		<div class="transitionBox"></div>
		
		<div>菜单效果:</div>
		<ul>
			<li><a href="http://www.baidu.com">百度</a></li>
			<li><a href="http://www.tedu.cn">达内</a></li>
			<li><a href="http://www.4399.com">游戏</a></li>
			<li><a href="http://www.liaoxuefeng.com">廖雪峰</a></li>
		</ul>
	</body>
</html>
